<template>
  <div class="table-container">
    <div class="table-content">
      <el-table
        :data="data"
        v-loading="loading"
        ref="table"
        :header-cell-style="config.headerCellStyle"
        :cell-style="config.cellStyle"
        :border="config.border"
        @selection-change="handleSelectionChange"
        :show-summary="config.showSummary"
        @sort-change="handleSortChange"
        style="width: 100%"
      >
        <el-table-column
          v-if="config.showSelection"
          :selectable="config.selectable"
          type="selection"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          v-if="config.showIndex"
          type="index"
          label="번호"
          :index="indexMethod"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :fixed="column.fixed"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="
            column.minWidth ? column.minWidth : column.width ? '' : 120
          "
          :sortable="column.sortable"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :align="column.align || 'center'"
        >
          <template slot-scope="scope">
            <div v-if="column.slot">
              <slot
                :name="column.slot"
                :callback="{ row: scope.row, index: scope.$index }"
              ></slot>
            </div>
            <span v-else-if="column.price">{{
              scope.row[column.prop] | toThousandFilter
            }}</span>
            <span v-else>{{ getKeyValue(scope.row, column.prop) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="table-pagination"
      :style="{ textAlign: pagination.align || 'center' }"
      v-if="pagination.show === undefined ? true : pagination.show"
    >
      <el-pagination
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[15, 30, 60, 120]"
        :current-page="pagination.currentPage || 1"
        :page-size="pagination.pageSize || 15"
        :layout="pagination.layout || 'slot, prev, pager, next'"
        :total="pagination.total || 0"
      >
        <span class="el-pagination__total">Total {{ pagination.total }}</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "mytable",
  data() {
    return {
      config: {},
      multipleSelection: []
    };
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    pagination: {
      type: Object
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.config = this.$attrs;
  },
  methods: {
    getKeyValue(row, prop) {
      const arr = prop.split(".");
      if (arr.length > 1) {
        let lastKey = row;
        arr.some(element => {
          if (lastKey[element]) {
            lastKey = lastKey[element];
          } else {
            return true;
          }
        });
        if (typeof lastKey === "string") {
          return lastKey;
        } else {
          return "";
        }
      } else {
        return row[prop];
      }
    },
    indexMethod(index) {
      return (
        index +
        ((this.pagination.currentPage || 1) - 1) *
          (this.pagination.pageSize || 15) +
        1
      );
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("emitSelection", val);
    },
    handleCurrentChange(val) {
      this.$emit("currentChange", val);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleSortChange(val) {
      this.$emit("sortChange", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.table-pagination {
  padding: 15px 0;
}
.table-content .el-table .sort-caret.ascending {
  color: #ccc;
}
</style>
